<template>
  <div class="app-container">
    <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="68px">
      <!-- <px-form-item label="PO类型">
        <px-select v-model="queryParams.poType" clearable placeholder="请选择PO类型">
          <px-option v-for="item in poTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </px-form-item> -->
      <px-form-item label="PO号">
        <px-select v-model="queryParams.poNo" multiple clearable placeholder="请选择PO号">
          <px-option v-for="item in poNoList" :key="item" :label="item" :value="item" />
        </px-select>
      </px-form-item>
      <px-form-item label="类别">
        <px-select v-model="queryParams.category" clearable placeholder="请选择类别">
          <px-option v-for="item in categoryList" :key="item.code" :label="item.name" :value="item.code" />
        </px-select>
      </px-form-item>
      <px-form-item label="品名">
        <px-select v-model="queryParams.name" clearable placeholder="请选择品名">
          <px-option v-for="item in nameList" :key="item.code" :label="item.name" :value="item.code" />
        </px-select>
      </px-form-item>
      <px-form-item label="品牌">
        <px-select v-model="queryParams.brand" clearable placeholder="请选择品牌">
          <px-option v-for="item in brandList" :key="item" :label="item" :value="item" />
        </px-select>
      </px-form-item>
      <px-form-item label="规格型号">
        <px-select v-model="queryParams.spec" clearable placeholder="请选择规格型号">
          <px-option v-for="item in specList" :key="item" :label="item" :value="item" />
        </px-select>
      </px-form-item>
      <px-form-item label="年月" prop="year">
        <px-date-picker v-model="queryParams.ym" type="month" value-format="YYYY-MM" format="YYYY-MM" placeholder="请选择年月" />
      </px-form-item>
      <px-form-item class="option-item">
        <px-button type="primary" @click="getList">查询</px-button>
        <px-button @click="resetQuery">重置</px-button>
        <!-- <px-button type="primary" plain @click="handleExport">导出</px-button> -->
      </px-form-item>
    </px-form>
    <div class="table-title">OPEN项预算金额统计</div>
    <div class="summary-total">
      <div class="s-item b-t b-l b-b">
        <div class="s-h">OPEN项预算金额（元）</div>
        <div class="s-v">{{ openNumberObj.prBudgetAmount }}</div>
      </div>
      <div class="s-item b-t b-l b-b">
        <div class="s-h">已收货金额（元）</div>
        <div class="s-v">{{ openNumberObj.number }}</div>
      </div>
      <div class="s-item b-t b-l b-b">
        <div class="s-h">收货金额占比</div>
        <div class="s-v">{{ openNumberObj.percentage }}</div>
      </div>
      <div class="s-item b-t b-l b-b b-r">
        <div class="s-h">月份</div>
        <div class="s-v">{{ queryParams.ym }}</div>
      </div>
    </div>
    <div class="table-title m-t-10">分批次WAN收货实际PO</div>
    <px-table v-loading="loading" :header-cell-style="{ background: '#e7eefb', color: '#000' }" border :data="tableList2">
      <template #empty>
        <px-empty />
      </template>
      <px-table-column type="index" label="序号" width="60" align="center" />
      <px-table-column label="类别" align="center" prop="specificationName" min-width="70" />
      <px-table-column label="品名" align="center" prop="sparePartName" min-width="100" />
      <px-table-column label="品牌" align="center" prop="brandValDesc" min-width="100" />
      <px-table-column label="规格型号" align="center" prop="supplyModel" min-width="70" />
      <px-table-column label="单位" align="center" prop="sparePartUnitDesc" width="70" />
      <px-table-column label="数量" align="center" prop="quantity" min-width="70" />
      <px-table-column label="PO号" align="center" prop="billNum" />
      <px-table-column label="时间" align="center" prop="billNum" />
    </px-table>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "FFULedger"
});
import { PxMessage, PxMessageBox } from "px-ui";
import { querySparePartPoGroup, querySparePartPoSummary, querySparePartPoSummaryCount } from "@/api/machineReport";
import { queryDictData } from "@/api/common";
import { getCurrentInstance, onMounted, reactive, ref, toRefs, nextTick } from "vue";
import { getToken } from "@/utils/auth";
const { VITE_FANRUAN_BASE_URL } = import.meta.env;
import dayjs from "dayjs";

const { proxy }: any = getCurrentInstance();
const poTypeList = [
  {
    label: "计划PO",
    value: "计划PO"
  },
  {
    label: "OPEN PARTS",
    value: "OPENPARTS"
  }
];
const poNoList = ref([]);
const categoryList = ref([]);
const nameList = ref([]);
const brandList = ref([]);
const specList = ref([]);
const yearList = ref([]);
const openNumberObj = ref({});
let ym = new Date();
let tmpList = [];
for (var i = -5; i < 5; i++) {
  let y = ym.getFullYear();
  tmpList.push({
    label: y + i,
    value: y + i
  });
}
yearList.value = tmpList;

const loading = ref(true);

const data = reactive<Record<string, any>>({
  queryParams: {
    ym: dayjs().format("YYYY-MM"),
    pageNum: 1,
    pageSize: 20
  },
  tableList: [],
  tableList1: [],
  tableList2: [],
  total: 0,
  colCount: 12
});

const { queryParams, total, tableList, tableList1, tableList2, colCount } = toRefs(data);

const getSelectList = async () => {
  let res = await querySparePartPoGroup({ pageSize: 99999 });
  let ct = [],
    sp = [];
  res.specificationList.forEach(item => {
    let keys = Object.keys(item);
    let code = keys[0];
    let name = item[code];
    ct.push({
      code,
      name
    });
  });
  categoryList.value = ct;
  res.sparePartList.forEach(item => {
    let keys = Object.keys(item);
    let code = keys[0];
    let name = item[code];
    sp.push({
      code,
      name
    });
  });
  nameList.value = sp;
  specList.value = res.supplyModelList;
  brandList.value = res.brandValList;
  poNoList.value = res.poNumberList;
};
/** 列表 */
const getList = async () => {
  loading.value = true;
  let startTime = "",
    endTime = "";
  if (queryParams.value.ym) {
    startTime = queryParams.value.ym + "-01";
    let ym = new Date(startTime);
    endTime = dayjs(new Date(ym.getFullYear(), ym.getMonth() + 1, 0)).format("YYYY-MM-DD");
    startTime += " 00:00:00";
    endTime += " 00:00:00";
  }
  const res: any = await querySparePartPoSummary({
    billNumList: queryParams.value.poNo,
    specificationCode: queryParams.value.category,
    sparePartCode: queryParams.value.name,
    startTime: startTime,
    endTime: endTime,
    poType: "计划PO"
  });
  tableList1.value = res?.sparePartCountDTOList || [];
  tableList2.value = res?.sparePartDetailCountDTOList || [];
  openNumberObj.value = res?.openNumberDTO || {};
  loading.value = false;
};

onMounted(async () => {
  getSelectList();
  getList();
});
/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.value.poNo = [];
  queryParams.value.ym = dayjs().format("YYYY-MM");
  queryParams.value.name = "";
  queryParams.value.category = "";
  proxy.resetForm("queryRef");
  getList();
};

/** 导出按钮操作 */
const handleExport = () => {
  if (queryParams.value.year) {
    let Token = getToken().accessToken || "";
    let url = `${VITE_FANRUAN_BASE_URL}/webroot/decision/view/report?viewlet=machine%252F%25E5%258C%2596%25E6%25BB%25A4%25E5%25AF%25BF%25E5%2591%25BD%25E7%25BB%25BC%25E5%2590%2588%25E6%258A%25A5%25E8%25A1%25A8.cpt&token=${Token}&startDate=${dateRange.value[0]}&endDate=${dateRange.value[1]}&count=${colCount.value}&format=excel&extype=simple&facCode=${localStorage.getItem("facCode") || ""}`;
    window.location.href = url;
  } else {
    PxMessage({
      message: "请选择时间后再导出",
      type: "error"
    });
  }
};
</script>
<style lang="scss" scoped>
.table-title {
  padding: 10px 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.m-t-10 {
  margin-top: 10px;
}

.b-t {
  border-top: 1px solid #e6e6e6;
}

.b-r {
  border-right: 1px solid #e6e6e6;
}

.b-b {
  border-bottom: 1px solid #e6e6e6;
}

.b-l {
  border-left: 1px solid #e6e6e6;
}

.summary-total {
  display: flex;

  .s-item {
    flex: 1;

    .s-h {
      padding: 10px;
      font-weight: bold;
      background: #e7eefb;
    }

    .s-v {
      padding: 10px;
    }
  }
}
</style>
